/**
* @description : demo 示例
* @descriptionDetail : 示例
* @copyright : 浙江烟草
* @author : mc
* @create : 2022-12-05 16:15:51
*/
<template>
	<view>
		<!-- #ifdef H5-ONLY -->
		<!-- 钉钉上不会显示theme-navbar -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
		</theme-navbar>
		<!-- #endif -->
		
		
		<view>
			<web-view :src="fileUrl"></web-view>
		</view>
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
	</view>
</template>
<script>
	import fabButton from '@/components/uni-fab.vue';
	import {THIRD_PARTY_DRAW_URL} from "@/config/setting.config"

	// const urlPath = "http://njjjs.top:8089";
	// const urlPath = "http://localhost:9999/test.html";
	export default {
		components: {
			fabButton
		},
		created() {
			window.addEventListener('message', this.receiveMessage ,false);
		},
		data() {
			return {
				fileUrl: THIRD_PARTY_DRAW_URL,
				base64:"",
				fContent: [{
						iconPath: require("@/static/confirm.png"),
						selectedIconPath: require("@/static/confirm.png"),
						text: '确认',
						active: false,
					},
					
				],
			};
		},
		methods: {
			// 接收消息
			receiveMessage (msg) {
			  // 输出
			  console.log('IFrame传递的消息:', msg.data);
			  this.base64 = msg.data
			},
			goBack(){
				if(!this.base64) {
					uni.showModal({
						title: '确认',
						content: '未获取到制图数据，返回后数据将会丢失，是否确认返回！',
						showCancel: true,
						success: async ({ confirm ,cancel}) => {
							if (confirm) {
								// 移除消息监听
								window.removeEventListener('message', this.receiveMessage, false);
								this.backPrev({
									paramKey: 'thirdPartyDraw',
									param: { "base64": "" }
								});
							}
						},
					})
				} else {
					// 移除消息监听
					window.removeEventListener('message', this.receiveMessage, false);
					let data = this.base64
					this.backPrev({
						paramKey: 'thirdPartyDraw',
						param: { "base64": data }
					});
				}
			},
			fabtrigger(){
				this.goBack()
			},
			
		}

	};
</script>
<style lang="scss" scoped>
	iframe {
		width: 100%;
		height: 100%;
		min-height: 300px;
		top:44px
	}
</style>